<template>
  <h1 v-text="slogan"></h1>
  <h2>比赛时间：<span v-text="time"></span>&nbsp;&nbsp;秒</h2>
  <h2>直播播报：<span v-text="result"></span></h2>
  <h2>直播播报：<span v-text="battle_result"></span></h2>
  <div>
    <div>
      中国队进球数：<span v-text="team.china"></span>&nbsp;&nbsp;&nbsp;&nbsp;
      <button @click="team.china++">点击中国队进一球</button>
    </div>
    <div>
      韩国队进球数：<span v-text="team.korea"></span>&nbsp;&nbsp;&nbsp;&nbsp;
      <button @click="team.korea++">点击韩国队进一球</button>
    </div>
  </div>
  <h1 v-text="msg"></h1>
  <input type="text" autocomplete="off" v-model="mySlogan">
  <h1 v-text="mySlogan"></h1>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      slogan: '桃李不言下自成蹊',
      time: 0,
      result: '势均力敌',
      team: {
        china: 0,
        korea: 0
      }
    }
  },
  methods: {
    battle() {
      if (this.time < 10) {
        if (this.team.china > this.team.korea) {
          this.result = '中国队领先'
        } else if (this.team.china < this.team.korea) {
          this.result = '韩国队领先'
        } else {
          this.result = '势均力敌'
        }
      } else {
        if (this.team.china > this.team.korea) {
          this.result = '中国队赢'
        } else if (this.team.china < this.team.korea) {
          this.result = '韩国队赢'
        } else {
          this.result = '势均力敌'
        }
      }
      return this.result
    }
  },
  computed: {
    msg() {
      return '我爱你中国，亲爱的母亲'
    },
    mySlogan:{
      get(){
        return this.slogan;
      },
      set(value){
        this.slogan = value
      }
    },
    battle_result() {
      return this.battle();
    }
  },
  created() {
    let time = setInterval(() => {
      this.time++;
      if (this.time == 10) {
        clearInterval(time);
      }
    }, 1000);
  }
}
</script>

<style>

ul > li {
  list-style: none;
}

.box {
  border-radius: 50%;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
